<template>
  <div>
    <ul class="mui-table-view mui-grid-view">
      <li
        class="mui-table-view-cell mui-media mui-col-xs-6"
        v-for="item in jokeList"
        :key="item.id"
      >
        <a href="#">
          <img class="mui-media-object" :src="item.images.small">
          <div class="mui-media-body">幸福就是可以一起睡觉</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
const API_PROXY = "https://bird.ioliu.cn/v1/?url="; //跨域数据代理使用，使用 jsonp 可以不用这个
import { Toast, Indicator } from "mint-ui";
export default {
  data() {
    return {
      jokeList: []
    };
  },
  created() {
    this.getJoke();
  },
  methods: {
    getJoke() {
      Indicator.open({ text: "加载中...", spinnerType: "fading-circle" });
      this.$http
        .get(
          API_PROXY + "https://api.douban.com/v2/movie/top250?start=0&count=50",
          {}
        ) //start=0&count=3 控制显示几条数据
        .then(result => {
          if (result.body.start === 0) {
            this.jokeList = result.body.subjects;
            Indicator.close();
          } else {
            // 失败的
            Toast("加载图文列表失败...");
            Indicator.close();
          }
        });
    }
  }
};
</script>

<style>
</style>
